<!DOCTYPE html>
<%@ page language="java" import="java.util.*" contentType="text/html;charset=UTF-8"%>
<%@include file="../../common/include/inc.jsp" %>
<head lang="en">
    <title>首页</title>
    <link rel="stylesheet" href="${ctx}/resource/plugins/ued/pub-ui/css/default.css"/>
    <link rel="stylesheet" href="${ctx}/resource/plugins/ace/assets/css/ace.css" class="ace-main-stylesheet" id="main-ace-style"/>
    <link rel="stylesheet" href="${ctx}/resource/plugins/ued/css/bootstrap.css"/>
    <link rel="stylesheet" href="${ctx}/resource/plugins/ued/css/page-styles.css"/>
    <link rel="stylesheet" href="${ctx}/resource/plugins/css/base.css"/>
    <link rel="stylesheet" href="${ctx}/resource/plugins/css/header.css"/>
    <link rel="stylesheet" href="${ctx}/resource/plugins/css/resource_style.css"/>
</head>
<body>
<!--主要内容 begin-->
<div class="homecontent" >
    <div class="row row1">
        <div class="item row1_item1">
                <div>
                    <%--资源总览视图--%>
                    <div class="title">
                        <div class="icon"></div>
                        <h3>资源总览</h3>
                    </div>
                    <div class="tongji">
                        <div class="line">
                            <span >资源在运数</span>
                            <span >资源剩余数</span>
                            <span >总数量</span>
                        </div>
                        <div class="line num">
                            <span id="zy"></span>
                            <span id="sy"></span>
                            <span id="zs"></span>
                        </div>
                    </div>
                    <div class="table3">
                        <table cellspacing="0" id="tb8">
                            <tr>
                                <th><span>资源分类</span></th>
                                <th><span style="text-align: center;">在运</span></th>
                                <th><span style="text-align: center;">剩余</span></th>
                                <th><span style="text-align: center;">总数量</span></th>
                            </tr>
                        </table>
                    </div>
                </div>
        </div>
        <div class="item row1_item2">
            <%--资源使用率视图--%>
            <div>
                <div class="title">
                    <div class="icon"></div>
                    <h3>资源使用率</h3>
                </div>
                <div>
                    <div style="width: 50%;height: 160px;float: left;left: 36px;" id="left_top_echart1"></div>
                    <div style="width: 50%;height: 160px;float: left;left: -62px;" id="left_top_echart2"></div>
                </div>
                <div>
                    <div style="width: 33%;height: 160px;float: left" id="left_top_echart3"></div>
                    <div style="width: 33%;height: 160px;float: left" id="left_top_echart4"></div>
                    <div style="width: 33%;height: 160px;float: left" id="left_top_echart5"></div>
                </div>
            </div>
            <%--资源使用率视图--%>
        </div>
        <div class="item row1_item3">
            <div>
                <div class="title">
                    <div class="icon"></div>
                    <h3>资源分类使用情况</h3>
                    <div class="homemore"></div>
                </div>
                <div id="top_right_echart" style="height: 300px;width: 98%;"></div>
            </div>
        </div>
    </div>
    <div class="row row2">
        <div class="item row2_item1">
            <div class="title">
                <div class="icon"></div>
                <h3>虚拟资源概览</h3>
            </div>
            <div class="tongji">
                <div class="line">
                    <span >在运数</span>
                    <span >剩余数</span>
                    <span >总数量</span>
                </div>
                <div class="line num">
                    <span id="rzy"></span>
                    <span id="rsy"></span>
                    <span id="rzs"></span>
                </div>
            </div>
            <div class="table3" style="height: 400px;margin:auto;">
                <table cellspacing="0" id="tb3">
                    <tr>
                        <th><span>虚拟资源</span></th>
                        <th><span style="text-align: center;">在运</span></th>
                        <th><span style="text-align: center;">剩余</span></th>
                        <th><span style="text-align: center;">总数量</span></th>
                    </tr>
                </table>
            </div>
        </div>
        <div class="item row2_item2">
            <div>
                <div class="title">
                    <div class="icon"></div>
                    <h3>存储使用概览</h3>
                </div>
                <div id="center_echart" style="height: 380px;width: 98%;"></div>
            </div>
        </div>
        <div class="item row2_item3">
            <div>
                <div class="title">
                    <div class="icon"></div>
                    <h3>CPU使用概览</h3>
                </div>
                <div id="center1_echart" style="height: 380px;width: 98%;">
                </div>
            </div>
        </div>
        <div class="item row2_item4">
            <div>
                <div class="title">
                    <div class="icon"></div>
                    <h3>内存使用概览</h3>
                </div>
                <div id="center_right_echart" style="height: 380px;width: 98%;left: 1px;">
                </div>
            </div>
        </div>

    </div>
    <div class="row row3">
        <div class="item row3_item1">
            <div>
                <div class="title">
                    <div class="icon"></div>
                    <h3>机房概览</h3>
                </div>
                <div class="table3">
                    <table cellspacing="0" id="tb2">
                        <tr>
                            <th><span>机房名称</span></th>
                            <th><span style="text-align: center;">机房年份</span></th>
                            <th><span style="text-align: center;">机房面积(m²)</span></th>
                            <th><span style="text-align: center;">机房位置</span></th>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        <div class="item row3_item2">
            <div class="title">
                <div class="icon"></div>
                <h3>机房分布视图</h3>
            </div>
            <div id="map_echart" style="height: 98%;width: 98%"></div>
        </div>
        <div class="item row3_item3">
            <div class="title">
                <div class="icon"></div>
                <h3>机房资源视图</h3>
                <div class="homemore"></div>
            </div>
            <div id="computerRoom" style="height: 98%;width: 98%"></div>
        </div>


    </div>

</div>
<script type="text/javascript" src="${ctx}/resource/plugins/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="${ctx}/resource/plugins/echarts4/esl.js"></script>
<script type="text/javascript" src="${ctx}/resource/plugins/ued/js/circle-progress.js"></script>
<script type="text/javascript" src="${ctx}/resource/plugins/ued/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${ctx}/resource/resource/resource/resourceView.js"></script>

</body>
</html>
